<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圆的拖拽</title>
	<style type="text/css">
		#big{
			width: 800px;
			height: 800px;
			border: 1px solid black;
			position: relative;
		}
		#small{
			width: 200px;
			height: 200px;
			background-color: gray;
			position: absolute;
			border-radius: 100px;
		}
		#small2{
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
			left: 300px;
			top: 300px;
			border-radius: 50px;
		}
		#small3{
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
			left: 300px;
			top: 300px;
			border-radius: 50px;
		}
	</style>
</head>
<body>
	<div id="big">
		<div id="small"></div>
		<div id="small2"></div>
		<div id="small3"></div>
	</div>
</body>
<script type="text/javascript">

	var big = document.getElementById('big');
	var small = document.getElementById('small');
	var small2 = document.getElementById('small2');

    small.onmousedown = function(event){
    	var x = event.clientX - small.offsetLeft;
    	var y = event.clientY - small.offsetTop;

    	document.onmousemove = function(event){
    		var _x = event.clientX;
    		var _y = event.clientY;

    		small.style.left = _x - x + "px";
    		small.style.top = _y - y + "px";

    		if(Math.sqrt((((small.offsetLeft+small.offsetWidth/2) - (small2.offsetLeft+small2.offsetWidth/2))*((small.offsetLeft+small.offsetWidth/2) - (small2.offsetLeft+small2.offsetWidth/2))) + (((small.offsetTop+small.offsetWidth/2) - (small2.offsetTop+small2.offsetWidth/2))*((small.offsetTop+small.offsetWidth/2) - (small2.offsetTop+small2.offsetWidth/2))))<=(small.offsetWidth+small2.offsetWidth)/2)
    		{
                small2.style.backgroundColor = 'yellow';
    		}else{
    			small2.style.backgroundColor = 'red';
    		}
    	}
    }

    document.onmouseup = function(){
    	document.onmousemove = "";
    }

</script>
</html>